<!-- 我的地图 -->

<template>
  <div class="full" id="SecureTrack-TrackGaode-map" />
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

const { AMap } = window

const getContent = (item) => `
<div class="flexCC">
  <div class="flex0">
    <img src="${CORE.image(item.passData)}" />
  </div>
  <div class="flex1">
    <div><label>姓名：</label><span>${item.name || '-'}</span></div>
    <div><label>联系方式：</label><span>${item.phone || '-'}</span></div>
    <div><label>证件号码：</label><span>${item.idNo || '-'}</span></div>
    <div><label>地点：</label><span>${item.address || '-'}</span></div>
    <div><label>时间：</label><span>${CORE.timeStr(item.accessTime) || '-'}</span></div>
  </div>
</div>
`

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyMap',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 是否全部就绪
     */
    readyAll() {
      return this.MAP.readyMap && this.readyList
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听列表就绪
     */
    readyAll(ready) {
      ready && this.addToMap()
    },
  },

  /**
   * 挂载完成 (先抽取再调用)
   */
  mounted() {
    this.init()
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 初始化
     */
    async init() {
      const { MAP } = this

      if (!MAP.gaodeConfig) {
        MAP.gaodeConfig = CORE.loadJSON(CORE.asset('AMAP_CONFIG.json'))
      }

      AMap.plugin('AMap.MoveAnimation', () => {
        MAP.map = new AMap.Map('SecureTrack-TrackGaode-map', MAP.gaodeConfig)
        MAP.readyMap = true
      })
    },

    /**
     * 添加到地图
     */
    addToMap() {
      const { map, LINE } = this.MAP
      const list = this.list.filter((item) => item.lon && item.lat)
      const length = list.length

      if (!length && this.param.phone) CORE.MSG.info('暂无轨迹')

      // 清空
      map.clearMap()

      // 文本标记点
      list.forEach((item, i) => {
        if (!item.lon || !item.lat) return

        const text = !i ? '起' : i === length - 1 ? '终' : i + 1
        const zIndex = !i || i === length - 1 ? length : i
        const position = new AMap.LngLat(item.lon, item.lat)

        const marker = new AMap.Text({ text, zIndex, position })
        marker.on('click', () => {
          const infoWindow = new AMap.InfoWindow({ content: getContent(item), offset: [0, -12] })
          infoWindow.open(map, position)
        })
        map.add(marker)
      })

      // 折线轨迹
      if (length > 1) {
        const path = list.map(({ lon, lat }) => [lon, lat])
        const polyline = new AMap.Polyline({ ...LINE, path })
        map.add(polyline)
      }

      // 自适应缩放显示
      map.setFitView(null, null, [0, 90, 0, 0])
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
